<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <!-- Base Css Files -->
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/jqueryui/ui-lightness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/fontello/css/fontello.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/animate-css/animate.min.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/nifty-modal/css/component.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/magnific-popup/magnific-popup.css" rel="stylesheet" /> 
        <link href="__PUBLIC__/statics/coco-chat/assets/css/style.css" rel="stylesheet" type="text/css" />
        <link href="__PUBLIC__/statics/coco-chat/assets/css/style-responsive.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/pace/pace.css" rel="stylesheet" />
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/jquery-notifyjs/styles/metro/notify-metro.css" rel="stylesheet" type="text/css" />
        
        <!-- Extra CSS Files -->
      	<link href="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap-validator/css/bootstrapValidator.min.css" rel="stylesheet"/>
      	<link href="__PUBLIC__/statics/coco-chat/assets/libs/jquery-icheck/skins/all.css" rel="stylesheet" />
      	<link href="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap-select/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
      	
      	<!-- 上传css -->
        <link href="__PUBLIC__/statics/coco-chat/assets/libs/jcrop-image/css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
        
        <!-- Custom Css Files -->
        <link href="__ADMIN_CSS__/style.css"  rel="stylesheet" />
	</head>
  	<body>
    <!-- Begin page -->
  	<div>
	    <div class="sub-header-title">
	    	<h2>添加商品</h2>
	    </div>
    	<form role="form" id="goods-form" enctype="multipart/form-data" class="form-horizontal" action="{:U('Mall/addGoods')}">
    		<div class="form-group">
				<label for="title" class="col-sm-2 control-label"><span class="red_star">*</span>商品名称</label>
				<div class="col-sm-5">
				  	<input type="text" class="form-control" id="title" name="title" value="">
				</div>
				<div class="col-sm-5">
					<p class="help-block">必须在2~20个字符之间</p>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label"><span class="red_star">*</span>商品分类</label>
				<div class="col-sm-5" style="z-index:999;">
					<select class="form-control selectpicker" name="goods_category_id">
				  		<option value="">请选择</option>
					  	<volist name="categorys" id="vo">
						  	<option value="{$vo.id}">{$vo.title}</option>
					  	</volist>
				  	</select>
				</div>
			</div>
        	<div class="form-group">
            	<label class="col-sm-2 control-label"><span class="red_star">*</span>商品展图</label>
            	<div class="col-sm-5">
              		<div id="uploadcontent">
	                    <!-- hidden crop params -->
	                    <input type="hidden" id="x1" name="x1" autocomplete="off" />
	                    <input type="hidden" id="y1" name="y1" autocomplete="off"/>
	                    <input type="file" class="btn btn-success block" style="display: none;" name="image_file" id="image_file" onchange="fileSelectHandler()" />
						<div>
	                       <img id="preview"/>
	                    </div>
	                    <!-- 是否截图标识 -->
	                    <input type="hidden" id="iscrop" name="iscrop"/>
	                    <!-- 文件大小 -->
	                    <input type="hidden" id="filesize" name="filesize" class="input" autocomplete="off" />
	                    <!-- 类型 -->
	                    <input type="hidden" id="filetype" name="filetype" class="input"autocomplete="off"/>
	                    <!-- 图像尺寸 -->
	                    <input type="hidden" id="filedim" name="filedim" class="input"autocomplete="off"/>
	                    <!-- 宽度 -->
	                    <input type="hidden" id="w" name="w" class="input"autocomplete="off"/>
	                    <!-- 高度 -->
	                    <input type="hidden" id="h" name="h" class="input"autocomplete="off"/>
					</div>
            	</div>
				<div class="col-sm-5">
              		<p class="help-block">图片宽度或高度必须大于400px，并且文件小于5M（支持格式为jpg、jpeg、png）</p>
              		<p class="help-block" id="uploadtip"></p>
              		<span id="preview_box" class="crop_preview"><img id="crop_preview" /></span>
            	</div>
			</div>
			<div class="form-group">
				<label for="old_price" class="col-sm-2 control-label"><span class="red_star">*</span>商品原价</label>
				<div class="col-sm-5">
				  	<input type="text" class="form-control" id="old_price" name="old_price" value="">
				</div>
				<div class="col-sm-5">
					<p class="help-block">必须为(0,100000000)的两位小数或整数</p>
				</div>
			</div>
			<div class="form-group">
				<label for="new_price" class="col-sm-2 control-label"><span class="red_star">*</span>商品现价</label>
				<div class="col-sm-5">
				  	<input type="text" class="form-control" id="new_price" name="new_price" value="">
				</div>
				<div class="col-sm-5">
					<p class="help-block">必须为(0,100000000)的两位小数或整数</p>
				</div>
			</div>
			
            <div class="form-group">
                <label for="total_number" class="col-sm-2 control-label"><span class="red_star">*</span>商品数量</label>
                <div class="col-sm-5">
                	<input type="text" class="form-control" id="total_number" name="total_number" value="">
                </div>
                <div class="col-sm-5">
             		<p class="help-block">必须为[1,100000000)的正整数</p>
                </div>
			</div>
			<div class="form-group">
                <label for="limit_number" class="col-sm-2 control-label"><span class="red_star">*</span>限购数量</label>
                <div class="col-sm-5">
                	<input type="text" class="form-control" id="limit_number" name="limit_number" value="">
                </div>
                <div class="col-sm-5">
             		<p class="help-block">必须为[0,100000000)的正整数,设置为0表示不限购</p>
                </div>
			</div>
			<div class="form-group">
                <label for="warn_number" class="col-sm-2 control-label"><span class="red_star">*</span>预警数量</label>
                <div class="col-sm-5">
                	<input type="text" class="form-control" id="warn_number" name="warn_number" value="">
                </div>
                <div class="col-sm-5">
             		<p class="help-block">必须为[1,100000000)的正整数</p>
                </div>
			</div>
			<div class="form-group">
            	<label class="col-sm-2 control-label"><span class="red_star">*</span>商品详细</label>
	            <div class="col-sm-5">
					<textarea id="detail" style="min-height:300px;" name="detail"></textarea>
	            </div>
        	</div>
        	<div class="form-group">
				<div class="col-sm-offset-4 col-sm-4">
                    <button type="submit" class="btn btn-success">添加</button>
                </div>
			</div>
		</form>
	</div>
  	<!-- End of page -->  

	<!-- Base Js Files -->
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery/jquery-1.11.1.min.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap/js/bootstrap.min.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jqueryui/jquery-ui-1.10.4.custom.min.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-ui-touch/jquery.ui.touch-punch.min.js"></script>
 	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-detectmobile/detect.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/fastclick/fastclick.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-slimscroll/jquery.slimscroll.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/nifty-modal/js/classie.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/nifty-modal/js/modalEffects.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-notifyjs/notify.min.js"></script>
    <script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-notifyjs/styles/metro/notify-metro-blue.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/pace/pace.min.js"></script>
	
	<!-- Extra Js Files -->
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap-validator/js/bootstrapValidator.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-icheck/icheck.min.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap-select/bootstrap-select.min.js"></script>
	<script src="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap-select2/select2.min.js"></script>
  	<script type="text/javascript" charset="utf-8" src="__PUBLIC__/statics/coco-chat/assets/libs/ueditor/ueditor.config.js"></script>
  	<script type="text/javascript" charset="utf-8" src="__PUBLIC__/statics/coco-chat/assets/libs/ueditor/ueditor.all.js"></script>
  	<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
  	<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
  	<script type="text/javascript" charset="utf-8" src="__PUBLIC__/statics/coco-chat/assets/libs/ueditor/lang/zh-cn/zh-cn.js"></script>
  	<!-- 上传js -->
  	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jcrop-image/js/jquery.Jcrop.js"></script>
  	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jcrop-image/js/script.js"></script>
  	<script src="__PUBLIC__/statics/coco-chat/assets/libs/jquery-form/js/jquery.form.js"></script>
  	<script src="__PUBLIC__/statics/coco-chat/assets/libs/bootstrap-fileinput/bootstrap.file-input.js"></script>
  
	<!-- Custom Js Files -->
	<script src="__ADMIN_JS__/common.js"></script>

	<script type="text/javascript">
		$(function(){
	    	//处理图片上传的样式
			$('#image_file').css({'display':'block'});
			//SELECT
			$('.selectpicker').selectpicker();
			//定义在线编辑器内容
	  		var ue = UE.getEditor('detail',{
	        	toolbars: [
			    	[
			       		'undo', //撤销
			            'redo', //重做
			            'bold', //加粗
			            'italic', //斜体
			            'underline', //下划线
			            'forecolor', //字体颜色
			            'strikethrough', //删除线
			            'subscript', //下标
			            'fontborder', //字符边框
			            'superscript', //上标
			            'formatmatch', //格式刷
			            'customstyle', //自定义标题
			            'paragraph', //段落格式
			            'fontfamily', //字体
			            'fontsize', //字号
			            'pasteplain', //纯文本粘贴模式
			            'selectall', //全选
			            'removeformat', //清除格式
			            'simpleupload', //单图上传
			            'justifyleft', //居左对齐
			            'justifyright', //居右对齐
			            'justifycenter', //居中对齐
			            'justifyjustify', //两端对齐
			            'backcolor', //背景色
			            'rowspacingtop', //段前距
			            'rowspacingbottom', //段后距
			            'lineheight', //行间距
			            'edittip ', //编辑提示
			   		]
		        ],
		        autoHeightEnabled: true,
		        autoFloatEnabled: true,
		        elementPathEnabled: false, //删除元素路径
			});
	
			//在线编辑器验证
	  		ue.addListener( 'contentChange', function( editor ) {
	      		if (ue.getContentLength(true)>0) {
	        		$('#goods-form').data('bootstrapValidator').updateElementStatus($('#goods-form').find("textarea[name='detail']"), "VALID", null );
	      		} else {
	        		$('#goods-form').data('bootstrapValidator').updateElementStatus($('#goods-form').find("textarea[name='detail']"), "INVALID", null );
	      		}
	  		});
	  		
	  		$('#goods-form').bootstrapValidator({
	            message: '',
	            trigger: 'blur',
	            excluded: [':disabled'],
	            submitHandler: function(validator, form, submitButton) {
					window.parent.layer.confirm('确定添加商品吗？', {
	                	btn: ['确认','取消'], //按钮
	                   	cancel: function(index){ 
	                   		window.parent.layer.close(index);
	                   		form.bootstrapValidator('disableSubmitButtons', false);
	                 	},
	             	}, function(index){
	             		var new_price = form.find("input[name='new_price']").val();
	             		var price = parseFloat(new_price);
	             		if (price<=0){
	             			window.parent.layer.msg('商品的价格有误，请至少填写一项购买所需的价格');
							notify('error','商品的价格有误，请至少填写一项购买所需的价格');
							return false;
	             		}
	             		
	             		if (!checkForm()){
	             			//弹出提示
							window.parent.layer.msg('上传图片像素不是1:1,请截图后再上传');
							notify('error','上传图片像素不是1:1,请截图后再上传');
							
							window.parent.layer.close(index);
							form.bootstrapValidator('disableSubmitButtons', false);
	             			return false;
	             		}
	             		
	                    //开启数据处理提示
	                    var load = window.parent.layer.msg('添加商品中。。。', {
	                            icon: 16,
	                            shade: 0.5,
	                            time: 0,
	                          });
	
	                    form.ajaxSubmit({
	                        type: 'post', 
	                        url: form.attr('action'), 
	                        data: form.serialize(),
	                        success: function(response) { // response 保存提交后返回的数据，一般为 json 数据
	                        	//关闭数据处理提示
								window.parent.layer.close(load);
					      		//弹出提示
								window.parent.layer.msg(response.message);
					      	
					      		//根据状态显示通知
					       		if(response.status){
									notify("success",response.message);
									location = '{:U("Mall/goodsList")}';
								}else{
									notify("error",response.message);
									form.bootstrapValidator('disableSubmitButtons', false);
								}
	                        }
	                    });
	                    window.parent.layer.close(index);
					}, function(index){
	                    //关闭确认对话框
	                    window.parent.layer.close(index);
	                    form.bootstrapValidator('disableSubmitButtons', false);
	                });
	            },
	            fields: {
					title: {
	             		validators: {
	                      	notEmpty: {
	                        },
	                        callback: {
	                          	callback:function(value, validator){
	                            	return value!='' && value.length>=2 && value.length<=20 ? true : false;
	                          	}
	              			}
	                    }
	           		},
	           		goods_category_id: {
		            	validators: {
		            		notEmpty: {
		                    }
		                }
		            },
	           		old_price: {
	                  	validators: {
	                      	callback: {
	                          	callback:function(value, validator){
	                            	var reg=/^([1-9][0-9]{0,7}|0)(\.[0-9]{1,2})?$/;
	                            	return value!='' && reg.test(value) && value>0 ? true : false;
	                          	}
	                        }
	                    }
	                },
	                new_price: {
	                  	validators: {
	                      	callback: {
	                          	callback:function(value, validator){
	                            	var reg=/^([1-9][0-9]{0,7}|0)(\.[0-9]{1,2})?$/;
	                            	return value!='' && reg.test(value) ? true : false;
	                          	}
	                        }
	                    }
	                },
	                total_number:{
	                	validators: {
	                   		callback: {
	                          	callback:function(value, validator){
	                            	var reg=/^[1-9][0-9]{0,7}$/; 
	                            	return value!='' && reg.test( value ) ? true : false;
	                          	}
	                   		}
	              		}
	                },
	                limit_number:{
	                	validators: {
	                   		callback: {
	                          	callback:function(value, validator){
	                            	var reg=/^[0-9]{0,8}$/; 
	                            	return value!='' && reg.test( value ) ? true : false;
	                          	}
	                   		}
	              		}
	                },
	                warn_number:{
	                	validators: {
	                   		callback: {
	                          	callback:function(value, validator){
	                            	var reg=/^[1-9][0-9]{0,7}$/; 
	                            	return value!='' && reg.test( value ) ? true : false;
	                          	}
	                   		}
	              		}
	                },
	                detail:{
	                   	validators: {
	                        notEmpty: {
	                        }
	                   	}
	 				},
	            }
	        });
	  		
	  		//FILE INPUT
		    $('input[type=file]').bootstrapFileInput();
		});
	</script>
</body>
</html>